<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;

            /* 一个元素的样式改变时，默认修改时间会在瞬间完成
            如果希望这个修改以后以动画形式逐渐改变则可以为这个元素添加过渡效果 */
            /* transition设置元素过渡，至少要设置过度的样式和过度的时间 
               all：需要过渡的样式，代表全部样式。但我们也可以指定某一个样式*/
            /* 还可以设置过渡的速率，
               速率默认为 ease=-in-off ：开始慢结束慢中间快
                         linear ：匀速 */
            transition: all 0.5s linear;

            /* 给元素设置阴影
                五个参数 ：横向偏移量 纵向偏移量 模糊程度 阴影大小 阴影颜色 */
            box-shadow: 2px 2px 10px 0 red;
        }

        /* 伪类选择器，鼠标悬停时展现样式 */
        #box:hover {
            transform: rotate(180deg);
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: #d3a0a0;
        }
        /* 过度只能实现一些简单的动画：从一个状态到另外一个状态
        （只能设置开始关键帧和结束关键帧,不能完成多个关键帧动画） */
    </style>
</head>

<body>
    <div id="box">字体大小</div>
</body>

</html>